import React, { lazy } from "react";
import { Navigate } from "react-router-dom";
import { useSelector } from "react-redux";
import { RootState } from "../store";
const Home = lazy(() => import("../pages/home"));
const Detail = lazy(() => import("../pages/detail"));
const Layout = lazy(() => import("../pages/layout"));
const Login = lazy(() => import("../pages/login"));
const My = lazy(() => import("../pages/my"));
const Publish = lazy(() => import("../pages/publish"));
const Attent = lazy(() => import("../pages/attent"));

const PriviteRoute: React.FC<{ children: JSX.Element }> = ({ children }) => {
  const isLogin = useSelector((state: RootState) => state.user.isLogin);
  console.log(isLogin);
  if (!isLogin) {
    return <Navigate to="/login"></Navigate>;
  }
  return children;
};

export const routes = [
  {
    path: "/",
    element: (
      <PriviteRoute>
        <Layout></Layout>
      </PriviteRoute>
    ),
    children: [
      {
        path: "/",
        element: <Home></Home>,
      },
      {
        path: "/my",
        element: <My></My>,
      },
    ],
  },
  {
    path: "/detail/:id",
    element: (
      <PriviteRoute>
        <Detail></Detail>
      </PriviteRoute>
    ),
  },
  {
    path: "/login",
    element: <Login></Login>,
  },
  {
    path: "/publish",
    element: (
      <PriviteRoute>
        <Publish></Publish>
      </PriviteRoute>
    ),
  },
  {
    path: "/attent",
    element: (
      <PriviteRoute>
        <Attent></Attent>
      </PriviteRoute>
    ),
  },
];
